<!--空间管理——表格-->
<template>

  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="false"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <div class="btn-class">
        <el-button type="primary" size="small" @click="addSpaceClick">
          添加空间
        </el-button>
        <el-button type="danger" size="small" @click="delMoreGroup">
          删除
        </el-button>

      </div>
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="lookDetail(row)"
        >
          编辑
        </el-link>
        <!-- :disabled="true"-->
        <el-link
          type="success"
          :underline="false"
          @click="prizeDrawer(row)"
        >
          设备列表
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="dataDetail(row)"
        >
          删除
        </el-link>
        <el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
      </div>
    </template>
    <!--添加空间-->
    <add-space ref="add"></add-space>
  </ele-pro-table>
</template>

<script>
    import AddSpace from "@/views/lncomingManagement/spaceManagement/components/add-space";
    import {delTask, queryTaskPage} from "@/api/digitalHumanManagement/taskList";
    export default {
        name: "table-list",
      components: {AddSpace},
      data(){
          return{
            // 当前编辑数据
            current: null,
            // 表格列配置
            columns: [
              {
                columnKey: 'selection',
                type: 'selection',
                width: 45,
                align: 'center'
              },
              {
                prop: 'sortNumber',
                label: '排序值',
                align: 'center',
                showOverflowTooltip: true,
                width: 60
              },

              {
                prop: 'taskName',
                label: '空间名称',
                align: 'center',
                width:209,
                showOverflowTooltip: true
              },
              {
                prop: 'imgName',
                label: '空间ID',
                width:300,
                align: 'center',
                showOverflowTooltip: true
              },
              {
                prop: 'numberOfWorks',
                label: '设备数量(台)',
              width:120,
                align: 'center',
                showOverflowTooltip: true
              },
              {
                prop: 'viewCount',
                label: '接入网关IP ',
                align: 'center',
                showOverflowTooltip: true,
              },
              {
                prop: 'likeCount',
                label: '接入国标ID ',
                align: 'center',
                showOverflowTooltip: true,
              },
              {
                prop: 'commentCount',
                label: '端口号(UDP) ',
                align: 'center',
                showOverflowTooltip: true
              },

              {
                prop: 'createTime',
                label: '创建时间',
                align: 'center',
                showOverflowTooltip: true
              },
              {
                label: '操作',
                columnKey: 'action',
                width: 300,
                align: 'center',
                resizable: false,
                slot: 'action',
                hideInSetting: true,
                showOverflowTooltip: true,
                fixed: 'right'
              }
            ],
            // 表格选中数据
            selection: [],
          }
      },
      methods: {
        addSpaceClick(){
          this.$nextTick(()=>{
            this.$refs['add'].show()
          })
        },
        /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
        async datasource({ page, limit, where, order }) {
          const result = await queryTaskPage({ ...where, ...order, page, limit,...this.activityList,
            merchantId: this.$store.state.user.info.merchantId  // 商家id
          });
          return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
        },
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ page: 1, where: where });
        },

        // 新建任务
        newTask(){
          this.drawer=true
          this.$nextTick(()=>{
            this.$refs['releases'].getAiList(this.aiList)
          })
        },

        // 删除
        delMoreGroup(){
          if (!this.selection.length) {
            // 请选择需要操作的数据
            this.$message.error('请选择数据');
            return;
          }
          var ids=this.selection.map(item => {
            return item.id
          })
          console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
          this.delGroups(ids)
        },
        /* 删除 */
        delSingle(row) {
          let ids=[]
          ids.push(row.id)
          console.log("ids====",ids)
          this.delGroups(ids)
        },
        delGroups(ids){
          this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delTask({
              ids:ids
            })
              .then((data) => {
                this.reload()
                this.$message.success('删除成功!');
              })
              .catch((e) => {
                this.$message.error(e);
              });
          }).catch(() => {
            this.$message.info('已取消删除');
          });
        }
      }
    }
</script>

<style scoped>

</style>
